<template>
  <div class="nav">
    <van-nav-bar>
      <template #left>
        <h3 style="color: #fff;">个人中心</h3>
      </template>
      <template #right>
        <img src="@/images/my_02.jpg" alt="">
      </template>
    </van-nav-bar>
    <div class="my">
      <div class="my_l">
        <van-image round width="10rem" height="10rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      </div>
      <div class="my_r">
        <p><b>用户名:</b><span>{{ username }}</span></p>
        <p><b>QQ邮箱</b><span>{{ email }}</span></p>
        <p><b>位置</b><span>{{ addresss }}</span></p>
      </div>
    </div>
  </div>
  <div class="myorder">
    我的订单
  </div>
  <van-grid>
    <van-grid-item icon-color="#157dfa" icon="refund-o" text="全部订单" @click="goOrder()" />
    <van-grid-item icon-color="#157dfa" icon="send-gift-o" text="待付款" @click="goOrder(1)" />
    <van-grid-item icon-color="#157dfa" icon="logistics" text="待发货" @click="goOrder(2)" />
    <van-grid-item icon-color="#157dfa" icon="balance-list-o" text="已完成" />
  </van-grid>
  <van-cell title="收货地址" is-link />
  <van-cell title="我的资金券" is-link />
  <van-cell title="我的商品券" is-link />
  <van-cell title="我的发票" is-link />
  <van-cell title="账户信息" is-link />
  <van-cell title="关于我们" is-link />
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter'
import { useRouter } from 'vue-router';
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
const router = useRouter()
const [{ username }] = store.userInfo
const [{ email }] = store.userInfo
const [{ addresss }] = store.userInfo
const goOrder = (index) => {
  if (index === 1) {
    router.push({ path: '/order/' + index })
  }
  if (index === 2) {
    router.push({ path: '/order/' + index })
  }
}
</script>

<style lang="scss">
.nav {
  width: 100%;
  height: 200px;
  background: #157dfa;
}

.van-nav-bar {
  background: #157dfa;
}

.my {
  width: 100%;
  height: 150px;

  .my_l {
    width: 30%;
    height: 150px;
    float: left;

    .van-image {
      margin: 20px;
    }
  }

  .my_r {
    width: 60%;
    float: right;

    p {
      color: #fff;
      height: 30px;
      margin-top: 10px;

      b {
        float: left;
      }

      span {
        float: right;
      }
    }
  }
}

.myorder {
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;

  p {
    line-height: 30px;
  }
}
</style>